<template>
  <div>
    <a-modal
      :title="dialogVisibleTile"
      v-model="dialogVisible"
      width="35%"
      :destroy-on-close="true"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目名称：" prop="categoryName">
              <a-input
                v-model="ruleForm.categoryName"
                placeholder="请输入分组名称，不超过15个字"
                @change="lmmcChange"
                :disabled="disabled"
                maxlength="15"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="上级类目：">
              <!-- <a-cascader
                :options="sjlmList"
                v-model="ruleForm.pid"
                :disabled="ruleForm.pid == ''"
                change-on-select
                placeholder="请选择上级类目"
              ></a-cascader>-->
              <a-select
                v-model="ruleForm.pid"
                style="width: 100%"
                placeholder="请选择上级类目"
                :disabled="ruleForm.pid == ''"
              >
                <a-select-option
                  :value="item.value"
                  :label="item.label"
                  v-for="(item,index) in sjlmList"
                  :key="index"
                >{{item.label}}</a-select-option>
              </a-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目图标：">
              <div class="upload_list clearfix">
                <div :key="item.uid" v-for="item in fileList">
                  <el-image class="imgs" :src="item.url" alt :preview-src-list="fileListUrl"></el-image>
                  <div>
                    <a-button type="link" size="small" @click="delUplod(item)">删除</a-button>
                  </div>
                </div>
                <a-upload
                  name="avatar"
                  listType="picture-card"
                  class="avatar-uploader"
                  :showUploadList="false"
                  :beforeUpload="beforeUpload"
                  @change="handleChange"
                  :disabled="disabled"
                >
                  <div v-if="fileList.length < 1">
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">点击上传</div>
                  </div>
                </a-upload>
              </div>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24">
            <el-form-item label="类目排序：">
              <a-input-number
                v-model="ruleForm.sortNum"
                id="inputNumber"
                :step="1"
                :min="0"
                :disabled="disabled"
                step-strictly
                :precision="0"
                placeholder="请输入大于0的整数"
                style="width:100%"
              ></a-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <a-button @click="handleClose">取 消</a-button>
        <a-button
          type="primary"
          @click="handleSure()"
          :loading="loading"
          v-if="dialogVisibleTile == '新增'"
        >保 存</a-button>
        <a-button type="primary" @click="handleUpdata()" :loading="loading" v-else>修 改</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script src="./index.js"></script>

<style lang="less" scoped>
.upload_list {
  & > div {
    float: left;
    margin-right: 10px;
    & > .imgs {
      width: 150px;
      height: 130px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    & > div {
      width: 150px;
      margin-bottom: 0;
      text-align: center;
      background-color: #fafafa;
      display: flex;
      justify-content: center;

      span {
        padding-right: 10px;
        cursor: pointer;
      }
    }
  }
  .avatar-uploader {
    float: left;
  }
}
</style>